<template>
	<div class="wrapper">
		<!-- 顶部应用栏 -->
		<header class="mdc-top-app-bar">
			<div class="mdc-top-app-bar__row">
				<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
					<BackButton />
					<h1 class="mdc-top-app-bar__title">修改密码</h1>
				</section>
			</div>
		</header>

		<!-- 主要内容区域 -->
		<div class="main-content">
			<!-- 用户信息卡片 -->
			<div class="user-info-card">
				<div class="card-header">
					<i class="material-icons">person</i>
					<h5>用户信息</h5>
				</div>
				<div class="user-info-section">
					<div class="user-info-item">
						<i class="material-icons">account_circle</i>
						<span class="user-name">{{user.userName}}</span>
					</div>
				</div>
			</div>

			<!-- 密码修改卡片 -->
			<div class="password-card">
				<div class="card-header">
					<i class="material-icons">lock</i>
					<h5>密码修改</h5>
				</div>
				<div class="form-section">
					<!-- 原密码 -->
					<div class="form-group">
						<label for="oldPassword" class="form-label">
							<i class="material-icons">lock_outline</i>
							<span>原密码</span>
						</label>
						<div class="input-wrapper">
							<input 
								id="oldPassword"
								v-model="user.oldPassword" 
								:type="showOldPassword ? 'text' : 'password'" 
								placeholder="请输入原密码" 
								class="form-input"
							/>
							<i 
								class="material-icons toggle-password" 
								@click="showOldPassword = !showOldPassword"
							>
								{{ showOldPassword ? 'visibility' : 'visibility_off' }}
							</i>
						</div>
					</div>

					<!-- 新密码 -->
					<div class="form-group">
						<label for="new1Password" class="form-label">
							<i class="material-icons">lock</i>
							<span>新密码</span>
						</label>
						<div class="input-wrapper">
							<input 
								id="new1Password"
								v-model="user.new1Password" 
								:type="showNewPassword ? 'text' : 'password'" 
								placeholder="请输入新密码（至少6位）" 
								class="form-input"
								@input="checkPasswordStrength"
							/>
							<i 
								class="material-icons toggle-password" 
								@click="showNewPassword = !showNewPassword"
							>
								{{ showNewPassword ? 'visibility' : 'visibility_off' }}
							</i>
						</div>
						<!-- 密码强度提示 -->
						<div v-if="user.new1Password" class="password-strength">
							<div class="strength-bar">
								<div 
									class="strength-fill" 
									:class="passwordStrengthClass"
									:style="{ width: passwordStrength + '%' }"
								></div>
							</div>
							<p class="strength-text" :class="passwordStrengthClass">
								{{ passwordStrengthText }}
							</p>
						</div>
						<p class="password-hint">
							<i class="material-icons">info</i>
							<span>密码需包含且只能包含大、小写字母和数字，长度至少为6位</span>
						</p>
					</div>

					<!-- 确认密码 -->
					<div class="form-group">
						<label for="new2Password" class="form-label">
							<i class="material-icons">lock</i>
							<span>确认密码</span>
						</label>
						<div class="input-wrapper">
							<input 
								id="new2Password"
								v-model="user.new2Password" 
								:type="showConfirmPassword ? 'text' : 'password'" 
								placeholder="请再次输入新密码" 
								class="form-input"
								:class="{ 'error': user.new2Password && !isPasswordMatch }"
							/>
							<i 
								class="material-icons toggle-password" 
								@click="showConfirmPassword = !showConfirmPassword"
							>
								{{ showConfirmPassword ? 'visibility' : 'visibility_off' }}
							</i>
						</div>
						<p v-if="user.new2Password && !isPasswordMatch" class="error-message">
							<i class="material-icons">error</i>
							<span>两次输入的密码不一致</span>
						</p>
						<p v-else-if="user.new2Password && isPasswordMatch" class="success-message">
							<i class="material-icons">check_circle</i>
							<span>密码一致</span>
						</p>
					</div>
				</div>
			</div>

			<!-- 提交按钮 -->
			<button class="submit-button" @click="updatePwd" :disabled="submitting">
				<i class="material-icons" v-if="!submitting">lock</i>
				<i class="material-icons rotating" v-else>refresh</i>
				<span>{{ submitting ? '修改中...' : '确认修改' }}</span>
			</button>
		</div>

		<!-- 底部菜单部分 -->
		<AppFooter></AppFooter>
	</div>
</template>

<script>
import AppFooter from '../components/AppFooter.vue';
import BackButton from '../components/BackButton.vue';
export default {
	name: 'ChangePwd',
	components: {
		AppFooter,BackButton
	},
	data() {
		return {
			user: {
				userId: '',
				userName: '',
				password: '',
				oldPassword:'',
				new1Password: '',
				new2Password: '',
			},
			showOldPassword: false,
			showNewPassword: false,
			showConfirmPassword: false,
			passwordStrength: 0,
			submitting: false
		}
	},
	computed: {
		isPasswordMatch() {
			return this.user.new1Password === this.user.new2Password && this.user.new2Password !== '';
		},
		passwordStrengthClass() {
			if (this.passwordStrength < 33) return 'weak';
			if (this.passwordStrength < 66) return 'medium';
			return 'strong';
		},
		passwordStrengthText() {
			if (this.passwordStrength < 33) return '密码强度：弱';
			if (this.passwordStrength < 66) return '密码强度：中';
			return '密码强度：强';
		}
	},
	created() {
		this.user = this.$getSessionStorage("user");
	},
	methods: {
		checkPasswordStrength() {
			const password = this.user.new1Password;
			if (!password) {
				this.passwordStrength = 0;
				return;
			}
			
			let strength = 0;
			// 长度检查
			if (password.length >= 6) strength += 20;
			if (password.length >= 8) strength += 10;
			if (password.length >= 12) strength += 10;
			
			// 字符类型检查
			if (/[a-z]/.test(password)) strength += 15;
			if (/[A-Z]/.test(password)) strength += 15;
			if (/[0-9]/.test(password)) strength += 15;
			
			// 特殊字符检查（虽然当前规则不允许，但保留逻辑）
			if (/[^A-Za-z0-9]/.test(password)) strength += 15;
			
			this.passwordStrength = Math.min(100, strength);
		},
		// 获取用户信息
		async updatePwd() {
			let user = this.user;
			
			// 1. 输入是否为空
			if (!user.oldPassword || !user.new1Password || !user.new2Password) {
				this.$toast?.error('请填写所有字段');
				return;
			}
			
			// 2. 验证新密码格式
			if (!/^[A-Za-z0-9]{6,}$/.test(user.new1Password)) {
				this.$toast?.error('密码需包含且只能包含大、小写字母和数字，长度至少为6位');
				return;
			}
			
			// 3. 检查原密码是否一致
			if (user.oldPassword != user.password) {
				this.$toast?.error('原密码输入错误');
				return;
			}
			
			// 4. 检查新密码是否与原密码相同
			if (user.oldPassword == user.new1Password) {
				this.$toast?.error('新密码不能与原密码相同');
				return;
			}
			
			// 5. 检查两次密码输入是否一致
			if (user.new1Password != user.new2Password) {
				this.$toast?.error('两次输入的密码不一致');
				return;
			}
			
			this.submitting = true;
			
			// 6. 提交表单
			let url = '/UserController/changePassword';
			this.$axios.post(url, this.$qs.stringify({
				userId: user.userId,
				oldPassword: user.oldPassword,
				newPassword: user.new1Password,
			})).then(response => {
				if (response.data.code=='200') {
					this.$toast?.success('密码修改成功');
					setTimeout(() => {
						this.$router.go(-1);
					}, 1000);
				} else {
					this.$toast?.error('修改失败：' + (response.data.message || '未知错误'));
				}
			}).catch(error => {
				console.error(error);
				this.$toast?.error('修改密码出现错误，请稍后重试');
			}).finally(() => {
				this.submitting = false;
			});
		}
	}

}
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
	min-height: 100vh;
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
}

/****************** header部分 ******************/
/* 顶部应用栏 */
.mdc-top-app-bar {
	background-color: #1976D2;
	color: white;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.mdc-top-app-bar__row {
	display: flex;
	align-items: center;
	height: 72px;
	padding: 0 20px;
}

.mdc-top-app-bar__section {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-direction: row;
}

.mdc-top-app-bar__title {
	font-size: 22px;
	font-weight: 500;
	margin: 0;
	white-space: nowrap;
	line-height: 1;
}

/* 主要内容区域 */
.main-content {
	padding: 20px 16px;
	padding-bottom: 120px;
}

/* 卡片样式 */
.user-info-card,
.password-card {
	background-color: white;
	border-radius: 16px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
	overflow: hidden;
	margin-bottom: 20px;
}

.card-header {
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	padding: 16px 20px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.card-header .material-icons {
	font-size: 24px;
	color: #667eea;
}

.card-header h5 {
	font-size: 16px;
	font-weight: 600;
	color: #333;
	margin: 0;
}

/* 用户信息部分 */
.user-info-section {
	padding: 20px;
}

.user-info-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	background-color: #f8f9fa;
	border-radius: 12px;
}

.user-info-item .material-icons {
	font-size: 24px;
	color: #667eea;
}

.user-name {
	font-size: 16px;
	font-weight: 500;
	color: #333;
}

/* 表单部分 */
.form-section {
	padding: 20px;
}

.form-group {
	margin-bottom: 24px;
}

.form-group:last-child {
	margin-bottom: 0;
}

.form-label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 500;
	color: #666;
	margin-bottom: 12px;
}

.form-label .material-icons {
	font-size: 20px;
	color: #667eea;
}

.input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
}

.form-input {
	width: 100%;
	padding: 14px 16px;
	padding-right: 48px;
	font-size: 16px;
	border: 2px solid #e0e0e0;
	border-radius: 12px;
	transition: all 0.3s ease;
	background-color: #fafafa;
	box-sizing: border-box;
}

.form-input:focus {
	outline: none;
	border-color: #667eea;
	background-color: white;
	box-shadow: 0 0 0 3px rgba(102,126,234,0.1);
}

.form-input.error {
	border-color: #f44336;
}

.form-input.error:focus {
	border-color: #f44336;
	box-shadow: 0 0 0 3px rgba(244,67,54,0.1);
}

.form-input::placeholder {
	color: #999;
}

.toggle-password {
	position: absolute;
	right: 12px;
	font-size: 20px;
	color: #999;
	cursor: pointer;
	transition: color 0.3s ease;
	user-select: none;
}

.toggle-password:hover {
	color: #667eea;
}

/* 密码强度 */
.password-strength {
	margin-top: 12px;
}

.strength-bar {
	width: 100%;
	height: 4px;
	background-color: #e0e0e0;
	border-radius: 2px;
	overflow: hidden;
	margin-bottom: 8px;
}

.strength-fill {
	height: 100%;
	transition: all 0.3s ease;
	border-radius: 2px;
}

.strength-fill.weak {
	background-color: #f44336;
}

.strength-fill.medium {
	background-color: #ff9800;
}

.strength-fill.strong {
	background-color: #4caf50;
}

.strength-text {
	font-size: 12px;
	margin: 0;
	font-weight: 500;
}

.strength-text.weak {
	color: #f44336;
}

.strength-text.medium {
	color: #ff9800;
}

.strength-text.strong {
	color: #4caf50;
}

.password-hint {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 8px;
	font-size: 12px;
	color: #999;
	margin-bottom: 0;
}

.password-hint .material-icons {
	font-size: 16px;
	flex-shrink: 0;
}

.error-message,
.success-message {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	font-size: 12px;
	margin-bottom: 0;
}

.error-message {
	color: #f44336;
}

.success-message {
	color: #4caf50;
}

.error-message .material-icons,
.success-message .material-icons {
	font-size: 16px;
}

/* 提交按钮 */
.submit-button {
	width: 100%;
	padding: 16px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border: none;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-shadow: 0 4px 12px rgba(102,126,234,0.4);
	transition: all 0.3s ease;
	margin-top: 8px;
}

.submit-button:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(102,126,234,0.5);
}

.submit-button:active:not(:disabled) {
	transform: translateY(0);
}

.submit-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.submit-button .material-icons {
	font-size: 20px;
}

.rotating {
	animation: rotate 1s linear infinite;
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* 响应式设计 */
@media (max-width: 600px) {
	.main-content {
		padding: 16px 12px;
		padding-bottom: 120px;
	}
}
</style>
